<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
     <button>全选</button>
    <button class="fan">反选</button>
     <button class="qu">取消</button><br>
    <label>
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">橙子
    <input type="checkbox">葡萄<br> 
    <input type="checkbox">芒果
    <input type="checkbox">草莓
    <input type="checkbox">荔枝
    <input type="checkbox">西瓜
    </label>
    <script>
        //   全选
        var button=document.querySelector('button')
        var input=document.querySelectorAll('input')
           button.addEventListener('click',()=>{ 
                 input.forEach((item)=>{
                  item.checked=true
                 })
           })
        //    反选
      var qu = document.querySelector('.qu')
         var input =document.querySelectorAll('input')
         qu.addEventListener('click',()=>{
            input.forEach(item=>{
                item.checked=!item.checked
            })
         }) 
        // 取消
 var   fan=document.querySelector('.qu')
        var input=document.querySelectorAll('input')
           qu.addEventListener('click',()=>{
          input.forEach((item)=>{
            item.checked=false
          })     
           })
           var arr=[]
           qu.forEach(item){

           }
</script> 
  <!-- 姓名：<input type="text">
  年龄；<input type="text">
  性别；<input type="text">
  <button onclick="jia()">添加</button>
  <table border="1">
    <thead>
      <tr>
        <th colspan="4">学生信息表</th>
      </tr>
      <tr>
        <th><input type="checkbox"></th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
     
    </tbody>
  </table>
         
          <script>
              var arr=[{
                id : 1,
                name: '张三',
                age : 18,
                sex : '女'
              },
              {
                id : 1,
                name: '赵六',
                age : 13,
                sex : '女'
              },
              {
                id : 1,
                name: '黄四',
                age : 20,
                sex : '男'
              },]
              // 获取dam
              var tbody= document.querySelector('tbody')
              // 渲染
              function xr(){
                tbody.innerHTML=''
                arr.forEach(item=>{
                  tbody.innerHTML+=` 
                  <tr>
                    <td><input type="checkbox"></td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td><button onclick="shan(${item.id})">删除</button><button>修改</button></td>
                  </tr>
                  `
                })
                
              }
              xr()
              // 添加
     function jia(){
           var inp1=document.querySelectorAll('input')[0]
           var inp2=document.querySelectorAll('input')[1]
           var inp3=document.querySelectorAll('input')[2]
           arr.push({
            id : arr.length +1,
            name: inp1.value,
            age : inp2.value,
            sex : inp3.value
           })
        xr()
     }
    //  删除
    function shan(id){
         var a=arr.findIndex(item=>item==id)
         arr.splice(a,1)
         xr()
    } -->
    <!-- // 隔行换色
    // function color(){
    //   var table=document.querySelectorAll(' tbody  tr')
    // for(var i=0;i<arr.length;i++ ){
    //  if(i%2==0){
    //   table[i].style.backgroundColor='red'
    //  }else{
    //   table[i].style.backgroundColor='yellow'
    //  }
    
    // } 
    // }
    // xr()
    // color()
      //  隔行换色
     function yanse(){
      var sty=document.querySelectorAll('tbody tr')
      for(var i=0;i<arr.length;i++){
          if(i%2==0){
            sty[i].style.backgroundColor="red"
          }else{
            sty[i].style.backgroundColor="yellow"
          }
      }
     }
     xr()
    yanse()
    
          </script> -->
          
</body>

</html>